<template>
    <div>
        <div class="bg bg-blur" :style="{ backgroundImage: `url( ${store.state.nowplay.img} )` }">
        </div>
        <div Class="content content-front">
            <div class="top">
                <van-icon name="arrow-down" @click="golittle()" />
                <span class="songname">{{ store.state.nowplay.name}}</span>
            </div>
            <img :src="store.state.nowplay.img">
            <div class="audio">
                <span class="time">{{ store.state.nowplay.currentTime }}</span>
                <van-slider v-model="store.state.nowplay.length" @drag-end="change()" active-color="#DD001B">
                    <template #button>
                        <div class="custom-button"></div>
                    </template>
                </van-slider>
                <span class="time">{{ store.state.nowplay.duration }}</span>
            </div>
            <div class="iconcontent">
                <span class='iconfont icon-24gl-shuffle'></span>
                <span class='iconfont icon-24gf-previous'></span>
                <van-icon :name="iconflag ? 'pause-circle-o' : 'play-circle-o'" @click="pause" />
                <span class='iconfont icon-24gf-next'></span>
                <span class='iconfont icon-24gl-playlistMusic3' @click="showplaylist"></span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { songurl, songdetail } from '../../api/music_style';
import { useRoute } from 'vue-router';
import { ref, onMounted, watch } from 'vue'
import { useStore } from 'vuex' // 引入useStore 方法
import { transTime } from '../../config/transtime'
//import { watch } from 'fs';

const store = useStore()  // 该方法用于返回store 实例



//const onClickLeft = () => history.back();
const route = useRoute()

let img = ref()

let iconflag = ref()
onMounted(() => {
    if(store.state.nowplay.state == 'pause'){
        iconflag.value = true
    }else{
        iconflag.value = false
    }
    store.commit('changesong')
})
watch(() => { store.state.nowplay.id }, () => {
    store.commit('changesong')
}, {
    deep: true
})


const change = async () => {
    store.state.audio.currentTime = store.state.nowplay.length / 100 * store.state.audio.duration
}

const pause = () => {
    iconflag.value = !iconflag.value
    if (iconflag.value == true) {
        store.state.audio.play()
        store.state.nowplay.state = 'pause'
    } else {
        store.state.audio.pause()
        store.state.nowplay.state = 'play'
    }
}

const golittle = () => {
    history.back();

    //store.state.nowplay.currentTime = store.state.audio.value.currentTime
}
const showplaylist = () => {
    store.state.ifshowplaylist = true
}
</script>

<style scoped>
@keyframes rotate {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }

    50% {
        transform: translateX(-50%) translateY(-50%) rotate(180deg);
    }

    100% {
        transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.content {
    color: #ffffff;
    font-size: 40px;
}

.bg {
    height: calc(100vh);
    text-align: center;
    line-height: calc(100vh);
}

.bg-blur {
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: blur(25px);
}

.content-front {
    position: absolute;
    left: 0px;
    right: 0px;
    height: calc(100vh)
}

img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 250px;
    height: 250px;
    border-radius: 90%;
    animation: rotate 6s linear infinite;
}

.audio {
    position: fixed;
    width: 100%;
    bottom: 20%;
    display: flex;
    align-items: center;
}

.custom-button {
    width: 10px;
    height: 10px;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #E0E0E3;
    border-radius: 100px;
}

.time {
    width: 10%;
    color: #EBEDF0;
    font-size: 10px;
}

.iconcontent {
    position: fixed;
    bottom: 5%;
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
}

.van-slider {
    width: 75%;
    margin: 0 10px;
}

.songname {

    text-align: center;
    margin: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top {
    position: relative;
    color: #EBEDF0;
    font-size: 20px;
    margin: 20px;

}
</style>
